<template>
  <div class="border flex p-3 mb-5 items-center">
    <n-tag :bordered="false" type="info" size="small" class="mr-2">
      {{ t['book'] }}
    </n-tag>

    <n-image class="w-[40px] rounded mr-2" :src="item.goods.cover"></n-image>

    <span class="text-gray-500 text-sm">{{ item.goods.title }}</span>

    <n-button class="ml-auto mr-3" type="primary" size="tiny" @click="open">查看</n-button>
    <n-button :loading="loading" type="error" size="tiny" @click="deleteItem">删除</n-button>

  </div>
</template>

<script setup>
import {ref} from "vue";
import {
  NTag, NImage, NButton, createDiscreteApi
} from "naive-ui";

// 引用声明
const props = defineProps({
  item: {
    type: Object,
    required: true
  }
});

// 声明事件
const emit = defineEmits("delete");

// 类型定义
const t = {
  course: "课程",
  book: "电子书",
  column: "专栏",
  live: "直播"
}

// loading删除
const loading = ref(false);


// 查看事件
const open = () => {
  navigateTo(`/detail/${props.item.type}/${props.item.goods.id}`)
}

// 删除事件
const deleteItem = () => {
  console.log(props.item)
  const {dialog, message} = createDiscreteApi(["dialog", "message"]);
  dialog.warning({
    title: "警告",
    content: "是否要取消该收藏?",
    positiveText: "确定",
    negativeText: "取消",
    onPositiveClick: async () => {
      loading.value = true;
      emit("delete", {
        goods_id: props.item.goods.id,
        type: props.item.type,
        success() {
          message.success("删除成功");
          loading.value = false;
        },
        fail() {
          loading.value = false;
        },
      });
    },
  });
}
</script>


<style scoped>

</style>